<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head th:replace="manage/common/head"></head>

<body>

<section id="container">
    <!--头部-->
    <header th:replace="manage/common/header"></header>

    <!-- 菜单栏 -->
    <aside th:replace="manage/common/aside"></aside>

    <!--主要内容 -->
    <section id="main-content">
        <section class="wrapper">
            <!-- page start-->
            <div class="row">
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            <span th:text="${group.name}">组名</span>-<span>组内成员</span>
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:location.reload();" class="fa fa-refresh"></a>
                            <a href="javascript:history.go(-1);" class="fa fa-mail-reply"></a>
                            </span>
                        </header>
                        <div class="panel-body">
                            <input type="hidden" id="groupId" th:value="${group.id}">
                            <div class="col-md-12">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>昵称</th>
                                        <th>登录名</th>
                                        <th>手机号</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="obj,objStatus : ${listInside}">
                                        <td th:text="${obj.id}"></td>
                                        <td th:text="${obj.nickName}"></td>
                                        <td th:text="${obj.username}"></td>
                                        <td th:text="${obj.phone}"></td>
                                        <td>
                                            <a class="btn btn-xs btn-info add" th:if="${not obj.have}"
                                               th:attr="data-id=${obj.id}">
                                                添加
                                            </a>
                                            <a class="btn btn-xs btn-danger remove" th:if="${obj.have}"
                                               th:attr="data-id=${obj.id}">
                                                <i class="glyphicon glyphicon-remove"></i>
                                                移除
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            <span th:text="${group.name}">组名</span>-<span>组外成员</span>
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:location.reload();" class="fa fa-refresh"></a>
                            <a href="javascript:history.go(-1);" class="fa fa-mail-reply"></a>
                            </span>
                        </header>
                        <div class="panel-body">
                            <input type="hidden" id="groupId" th:value="${group.id}">
                            <div class="col-md-12">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>昵称</th>
                                        <th>登录名</th>
                                        <th>手机号</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="obj,objStatus : ${listOther}">
                                        <td th:text="${obj.id}"></td>
                                        <td th:text="${obj.nickName}"></td>
                                        <td th:text="${obj.username}"></td>
                                        <td th:text="${obj.phone}"></td>
                                        <td>
                                            <a class="btn btn-xs btn-info add" th:if="${not obj.have}"
                                               th:attr="data-id=${obj.id}">
                                                添加
                                            </a>
                                            <a class="btn btn-xs btn-danger remove" th:if="${obj.have}"
                                               th:attr="data-id=${obj.id}">
                                                <i class="glyphicon glyphicon-remove"></i>
                                                移除
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <!-- page end-->
        </section>
    </section>

    <!--右侧边栏 -->
    <div th:replace="manage/common/right-sidebar"></div>

</section>

<!-- external javascript -->
<div th:replace="manage/common/script"></div>

<script type="text/javascript" src="/manage/custom/page/mine/group/admin.js"></script>
<script>
    window.onload = function () {

        var groupAdmin = new window.controller.GroupAdmin();

        groupAdmin.init();

        var search = new window.controller.Search();

        search.init();
    };
</script>

</body>
</html>